
<template>
	<!------------------------------------ 商品详情头部（标题栏+轮播图） ------------------------------------
    @desc 包含标题栏，商品轮播图和视频
    @author kyle
    @date 2021-03-05
    @props
      list         ———— 图片列表
      videoUrl     ———— 视频地址
      scrollTop    ———— 滚动高度
  -->
	<div class="pos-r">
		<!-- 标题栏 -->
		<div ref="title" class="fixed-top flex-center tac title ">
			<div class="left-arrow" @click="clickLeft" />
			<div class="flex-1 color-gray-light fs-28" :class="activeIndex === 0 ? 'title-active' : ''"
				@click="changeDetail(0)">商品
			</div>
			<div class="flex-1 color-gray-light fs-28" :class="activeIndex === 1 ? 'title-active' : ''"
				@click="changeDetail(1)">详情
			</div>
		</div>
		<!-- 轮播图 -->
		<van-swipe v-show="mediaType === 'picture'" class="media-box" ref="swipe" :autoplay="3000" @change="onChange">
			<van-swipe-item v-for="(item, index) in list" :key="index">
				<imgBox :img-url="item" :show-big-picture="showBigPicture" class="imgBox" />
			</van-swipe-item>
			<template #indicator>
				<div v-show="list.length" class="custom-indicator">{{ current + 1 }} / {{ list.length }}</div>
			</template>
		</van-swipe>
		<!-- 视频 -->
		<div v-show="mediaType === 'video'" class="media-box" :class="showMt88 ? 'mt-88' : ''">
			<video :src="videoSrc" controls :poster="imgSrc" preload="auto" style="width:100%;height:100%;object-fit: contain;"
				@play="showMarginTop" />
		</div>
		<!-- 视频、图片切换 -->
		<div v-show="list && videoSrc" class="mediaTab flex-center">
			<span class="tabItem" :class="mediaType === 'video' ? 'activeTab' : ''" @click="switchover(0)">视频</span>
			<span class="tabItem" :class="mediaType === 'picture' ? 'activeTab' : ''" @click="switchover(1)">图片</span>
		</div>
	</div>
</template>

<script>
import imgBox from 'components/imgBox'
export default {
	name: 'ProductHead',
	components: {
		imgBox
	},
	props: {
		list: { // 图片列表
			type: Array,
			required: true,
			default: function () {
				return []
			}
		},
		videoUrl: { // 视频地址
			type: String,
			required: false,
			default: ''
		},
		scrollTop: { // 滚动高度
			type: Number,
			required: false,
			default: 0
		},
		imgUrl: { // 视频背景图
			type: String,
			required: false,
			default: ''
		},
	},
	data() {
		return {
			activeIndex: 0,
			current: 0,
			showBigPicture: false,
			mediaType: 'video',
			showMt88: false,
		}
	},
	computed: {
		videoSrc() {
			let videoSrc = this.videoUrl
			if (videoSrc) {
				videoSrc = this.$utils.getFullUrl(videoSrc)
				this.mediaType = 'video'
			} else {
				this.mediaType = 'picture'
			}
			return videoSrc
		},
		imgSrc() {
			let imgSrc = this.imgUrl
			if (!imgSrc) {
				imgSrc = require('@/assets/images/no-img.jpg')
			} else if (imgSrc.indexOf('http') === -1) {
				if (!this.$webInfo.ImgDomain) {
					this.$webInfo.ImgDomain = 'https://oss.hsy884.com'
				}
				imgSrc = this.$webInfo.ImgDomain + imgSrc
			}
			return imgSrc
		},

	},
	watch: {
		scrollTop(newVal, oldVal) {
			this.$utils.changeOpacity(this.$refs.title, newVal)
		}
	},
	mounted() {
		this.$utils.changeOpacity(this.$refs.title, this.scrollTop)
	},
	methods: {
		showMarginTop() {
			console.log("ding")
			this.showMt88 = true
		},
		// 返回按钮
		clickLeft() {
			this.current = 0;
			this.$emit('clickLeft')
		},
		// 商品/详情切换
		changeDetail(index) {
			this.activeIndex = index
			this.$emit('changeDetail', index)
		},
		onChange(index) {
			this.current = index
		},
		switchover(num) {
			if (num == 0) {
				this.mediaType = 'video';
			} else {
				this.mediaType = 'picture';
				setTimeout((e) => {
					this.$refs.swipe.resize();
				}, 500)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.title {
	height: 88px;

	.left-arrow {
		position: absolute;
		width: 40px;
		height: 40px;
		top: 22px;
		left: 35px;
		z-index: 10;

		&:after {
			content: '';
			position: absolute;
			top: 10px;
			left: 5px;
			display: inline-block;
			width: 16px;
			height: 16px;
			border: 2px solid;
			border-color: transparent transparent currentColor currentColor;
			transform: rotate(45deg);
		}
	}

	.title-active {
		position: relative;
		color: $color3;
		font-weight: 600;

		&:after {
			content: '';
			position: absolute;
			width: 52px;
			height: 6px;
			border-radius: 3px;
			@include bg-primary();
			bottom: -10px;
			left: calc(50% - 26px);
		}
	}
}

.mt-88 {
	margin-top: 88px;
}

// 图片轮播
.media-box {
	position: relative;
	height: 750px;

	.imgBox {
		width: 100%;
		height: 100%;
	}

	.custom-indicator {
		position: absolute;
		right: 30px;
		bottom: 25px;
		padding: 7px 14px;
		line-height: 1;
		font-size: 20px;
		border-radius: 20px;
		color: #fff;
		background: rgba(0, 0, 0, 0.2);
	}
}

.mediaTab {
	background: rgba(255, 255, 255, 0.5);
	position: absolute;
	bottom: 26px;
	left: calc(50% - 74px);
	font-size: 20px;
	line-height: 34px;
	border-radius: 17px;

	.tabItem {
		padding: 0 13px;
	}

	.activeTab {
		color: $colorF;
		background: $color3;
		border-radius: 17px;
	}
}
</style>
